<template>
  <div>
    <h2>常用表单项如何双向绑定</h2>
    姓名：<input type="text" v-model="uname" /><br />

    性别：
    <input type="radio" name="sex" value="男" v-model="xingbie" />男生
    <input type="radio" name="sex" value="女" v-model="xingbie" />女生<br />

    爱好：
    <input type="checkbox" name="hobby" value="chifan" v-model="hobby" />吃饭
    <input type="checkbox" name="hobby" value="shuijiao" v-model="hobby" />睡觉
    <input type="checkbox" name="hobby" value="dadoudou" v-model="hobby" />打豆豆<br />

    籍贯：
    <select v-model="address">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="tj">天津</option></select
    ><br />

    状态：<input type="checkbox" v-model="state" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname: '张三',
      xingbie: '女',
      hobby: ['chifan', 'dadoudou'],
      address: 'sh',
      state: true // true表示选中；false表示未选中
    }
  }
}
</script>
